<template>
  <view class="order-list-page">
    <!-- 订单列表 -->
    <view v-for="(order, index) in orders" :key="index" class="order-card">
      <!-- 左侧图片 -->
      <image class="order-image" :src="order.productImage" mode="aspectFill"></image>

      <!-- 中间内容 -->
      <view class="order-info">
        <!-- 食品名称和金额 -->
        <view class="order-header">
          <view class="order-title">{{ order.productName }}</view>
        </view>

        <!-- 规格 -->
        <view class="order-spec">规格: {{ order.productSpecification }}</view>

        <view class="order-amount">￥{{ order.price }}</view>

      </view>

      <!-- 右上角订单状态 -->
      <view class="order-status">{{ order.orderStatus }}</view>

      <!-- 待支付状态下的操作按钮 -->
      <view  class="order-actions">
        <!-- 取消支付按钮 -->
        <tn-button @click="cancelPayment(order)" v-if="order.orderStatus === '待支付'" backgroundColor="#FFA500" fontColor="tn-color-white" margin="10rpx 10rpx">取消支付</tn-button>
        <!-- 结算支付按钮 -->
        <tn-button v-if="order.orderStatus === '待支付' && isToCart === false" @click="playOreder(order)" backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">支付</tn-button>
        <!--        <tui-button type="danger" @click="makePayment(order)" size="mini" class="order-action-btn">结算支付</tui-button>-->
      </view>
    </view>
    <tn-button v-if="isToCart" class="fixed-bottom-button" @click="quikPlay()" backgroundColor="#56BD48" padding="40rpx 0" width="90%"
               shadow>
      <text class="tn-color-white ">立 即 支 付</text>
    </tn-button>
  </view>
</template>


<script>
import {getOrdersPage, getOrdersPageByCart,getOrders,updateOrders} from "@/api/orders";

export default {
  onLoad(options) {
    console.log(options)
    // this.queryOrdersList()
    if (options.list) {
      const list = JSON.parse(options.list)
      this.isToCart = true
      this.queryOrdersListByCart(list)
    }else if (options.userId){
      this.isToCart = false
      this.queryParams.isAllData = true
      this.queryOrdersList()
    }else if (options.orderId){
      this.ordersId = options.orderId
      this.queryOrders();
    }
  },
  onShow() {
    this.ids = []
  },
  data() {
    return {
      ids:[],
      ordersId:0,
      isToCart:false,

      queryParams: {
        pageNo: 1,
        pageSize: 10,
        orderNumber: null,
        productName: null,
        productSpecification: null,
        quantity: null,
        price: null,
        orderStatus: null,
        cartId: null,
        productId: null,
      },
      // 示例订单数据
      orders: [
        {
          image: 'https://example.com/food-image1.jpg', // 食品图片 URL
          title: '食品名称1', // 食品名称
          spec: '500g', // 规格
          amount: 99.99, // 金额
          status: '已完成' // 订单状态
        },
        {
          image: 'https://example.com/food-image2.jpg', // 食品图片 URL
          title: '食品名称2', // 食品名称
          spec: '250g', // 规格
          amount: 49.99, // 金额
          status: '待支付' // 订单状态
        }
      ]
    };
  },
  onPullDownRefresh() {
    // 用户下拉刷新时触发
    this.queryOrdersList();
  },
  methods: {
    playOreder(order){
      const price = order.price;
      this.ids.push(order.id)
      console.log(this.ids)
      const ids = JSON.stringify(this.ids);
      uni.navigateTo({
        url: `/pages/play/index?price=${encodeURIComponent(price)}&ids=${ids}`
      });
    },
    queryOrders() {
      getOrders(this.ordersId).then(res => {
        console.log(res.data.data)
        this.orders = [res.data.data]
        this.isToCart = false
        this.tranStatus(this.orders)
      })
    },
    tranStatus(list) {
      list.map(item => {
        if (item.orderStatus === '1') {
          item.orderStatus = '待支付'
        } else if (item.orderStatus === '2') {
          item.orderStatus = '已支付'
        } else if (item.orderStatus === '3') {
          item.orderStatus = '已取消'
        } else if (item.order){
          item.orderStatus = '其他状态'
        }
        return item;
      })
      this.orders = list;
      console.log(this.orders)
    },
    quikPlay(){
      console.log(this.orders)
      let countPrice = 0;
      this.orders.forEach(item => {
        countPrice += item.price * item.quantity
        this.ids.push(item.id)
      })
      console.log(countPrice)
      const ids = JSON.stringify(this.ids);
      uni.navigateTo({
        url: `/pages/play/index?price=${encodeURIComponent(countPrice)}&ids=${ids}`
      });
    },
    queryOrdersListByCart(list) {
      const arr = [];
      list.forEach(item => {
        arr.push("num"+item.id+item.productId)
      })
      this.queryParams.productCartCode = arr
      getOrdersPageByCart(this.queryParams).then(res => {
        console.log(res.data.data.list)
        res.data.data.list.map(item => {
          if (item.orderStatus === '1') {
            item.orderStatus = '待支付'
          } else if (item.orderStatus === '2') {
            item.orderStatus = '已支付'
          } else if (item.orderStatus === '3') {
            item.orderStatus = '已取消'
          } else if (item.order){
            item.orderStatus = '其他状态'
          }
          return item;
        })
        this.orders = res.data.data.list;
      })
    },
    queryOrdersList() {
      getOrdersPage(this.queryParams).then(res => {
        console.log(this.isToCart)
        this.tranStatus(res.data.data.list)
        uni.stopPullDownRefresh();
      })
    },
    // 取消支付
    cancelPayment(order) {
      // 在此处实现取消支付的逻辑
      order.orderStatus = 3
      updateOrders(order).then(res=>{
        if (res.data.code == 0){
          uni.showToast({
            title: `订单 ${order.productName} 已取消支付`,
            icon: 'none'
          });
          this.queryOrdersList()
        }
      })
    },
    // 结算支付
    makePayment(order) {
      // 在此处实现结算支付的逻辑
      uni.showToast({
        title: `订单 ${order.title} 正在支付`,
        icon: 'none'
      });
      // 示例：改变订单状态
      order.status = '已完成';
    }
  }
}
</script>


<style>
.fixed-bottom-button {
  position: fixed;
  bottom: 20rpx;
  left: 35rpx;
  right: 0;
  z-index: 1000; /* 确保按钮在其他元素之上 */
}

/* 页面容器 */
.order-list-page {
  padding: 20rpx;
  background-color: #f7f7f7; /* 背景颜色 */
}

/* 订单卡片 */
.order-card {
  display: flex;
  position: relative;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  margin-bottom: 20rpx;
}

/* 左侧图片 */
.order-image {
  width: 150rpx;
  height: 180rpx;
  border-radius: 15rpx;
  margin-right: 20rpx;
}

/* 中间内容 */
.order-info {
  flex: 1;
}

/* 食品名称和金额 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

/* 食品名称 */
.order-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 订单金额 */
.order-amount {
  font-size: 32rpx;
  color: #ff4081; /* 强调金额 */
  font-weight: bold;
}

/* 规格 */
.order-spec {
  font-size: 28rpx;
  color: #666;
  margin-top: 5rpx;
}

/* 订单状态 */
.order-status {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 28rpx;
  color: #4caf50; /* 默认状态颜色，可以根据实际需求调整 */
  font-weight: bold;
  background-color: #e8f5e9; /* 绿色背景，状态突出 */
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
}

/* 待支付状态下的操作按钮容器 */
.order-actions {
  position: absolute;
  bottom: 10rpx; /* 底部距离 */
  right: 20rpx; /* 右侧距离 */
  display: flex;
  gap: 10rpx; /* 按钮间距 */
}

/* 按钮样式 */
.order-action-btn {
  font-size: 24rpx;
}
</style>


